<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Title</title>
		<style>
			html,
			body {
				margin: 0;
				overflow: hidden;
				width: 100%;
				height: 100%;
				/* cursor: none; */
				/* background: linear-gradient(to bottom,#000000 0%,#5788fe 100%); */
                background: #000;
			}
            div{
                position: relative;
            }
            canvas{
                position: absolute;
                top: 0;
                left: 0;
            }
            #canvas2{
                z-index: 1;
            }
		</style>
	</head>
	<body>
        <div>
            <canvas id="canvas"></canvas>
            <canvas id="canvas2"></canvas>
        </div>
		<script>
            /* 
            1. 设置全屏的背景 Canvas
            */
			var ctx = document.getElementById("canvas"),
				content = ctx.getContext("2d"),
				round = [],
				WIDTH,
				HEIGHT,
				initRoundPopulation = 80;

			WIDTH = document.documentElement.clientWidth;
			HEIGHT = document.documentElement.clientHeight;
			ctx.width = WIDTH;
			ctx.height = HEIGHT;


            /* 
            2. 设置 `Round_item` 类
            要设置的是位置随机、透明度随机、半径随机的圆。
            参数：
                - x 坐标
                - y 坐标
                - 半径
                - 透明度
                - index 
            */
			function Round_item(index, x, y) {
				this.index = index;
				this.x = x;
				this.y = y;
				this.r = Math.random() * 2 + 1;
				var alpha = (Math.floor(Math.random() * 10) + 1) / 10 / 2;
				this.color = "rgba(255,255,255," + alpha + ")";
			}
            /* 
            3. 设置 `draw()` 方法
            给每一个 round 设置 `draw()` 方法
            将 `draw()` 方法设置在 `Round_item` 的原型中，这样我们创建出来的每一个 `Round_item` 实例对象都拥有了 `draw()` 
            */
			Round_item.prototype.draw = function () {
				content.fillStyle = this.color;
				content.shadowBlur = this.r * 2;
				content.beginPath();
				content.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); // 绘制圆
				content.closePath();
				content.fill();
			};

            /* 
            5. `animate()` 函数
            - 首先清除屏幕的内容
            */
			function animate() {
				content.clearRect(0, 0, WIDTH, HEIGHT); 
				for (var i in round) {
					round[i].move();
				}
				requestAnimationFrame(animate);
			}

            /* 
            6. `move()` 函数
            - 改变 round 的 y 坐标
            设置边界条件
            */
			Round_item.prototype.move = function () {
				this.y -= 0.15;
				if (this.y <= -10) {
					this.y = HEIGHT + 10;
				}
				this.draw();
			};

            /* 
            4. 设置初始化 `init()` 函数
            在 `init()` 函数中，创建单个的 round，然后使用其 `draw()` 方法
            */
			function init() {
				for (var i = 0; i < initRoundPopulation; i++) {
					round[i] = new Round_item(
						i,
						Math.random() * WIDTH,
						Math.random() * HEIGHT
					);
					round[i].draw();
				}
				animate();
			}

			init();


            var canvas2 = document.getElementById("canvas2"),
				ctx2 = canvas2.getContext("2d"),
				WIDTH2 = (canvas2.width = document.documentElement.clientWidth),
				HEIGHT2 = (canvas2.height = document.documentElement.clientHeight),
				para = {
					num: 100,
					color: false, //  颜色  如果是false 则是随机渐变颜色
					r: 0.9,
					o: 0.09, //  判断圆消失的条件，数值越大，消失的越快
					a: 1,
				},
				color,
				color2,
				round_arr = [];

			window.onmousemove = function (event) {
				mouseX = event.clientX;
				mouseY = event.clientY;

				round_arr.push({
					mouseX: mouseX,
					mouseY: mouseY,
					r: para.r,
					o: 1,
				});
			};

			// 判断参数中是否设置了 color，如果设置了 color，就使用该值、
			// 如果参数中的 color 为 false，那么就使用随机的颜色
			if (para.color) {
				color2 = para.color;
			} else {

				color = Math.random() * 360;
			}

			function animate2() {
				if (!para.color) {
					color += 0.1;
					color2 = "hsl(" + color + ",100%,80%)";
				}

				ctx2.clearRect(0, 0, WIDTH2, HEIGHT2);
				for (var i = 0; i < round_arr.length; i++) {
					ctx2.fillStyle = color2;
					ctx2.beginPath();
					ctx2.arc(
						round_arr[i].mouseX,
						round_arr[i].mouseY,
						round_arr[i].r,
						0,
						Math.PI * 2
					);
					ctx2.closePath();
					ctx2.fill();
					round_arr[i].r += para.r;
					round_arr[i].o -= para.o;

					if (round_arr[i].o <= 0) {
						round_arr.splice(i, 1);
						i--;
					}
				}
				window.requestAnimationFrame(animate2);
			}
			animate2();



		</script>
	</body>
</html>
